<template>
  <div :class="`email-summary-content-component ${info.isRead ? 'non-read' : ''} ${ currentId === info.id ? 'current' : '' }` ">
    <div class="item-top">
      <b-icon class="read-status" type="read-status"></b-icon>
      <span class="email-address">1299563700@qq.com</span>
      <span class="email-status">
        <b-icon type="attach"></b-icon>
        <b-icon type="lock" style="margin-left: 4px;"></b-icon>
      </span>
    </div>
    <div class="item-bottom">
      <b-icon class="collect-status active" type="collect"></b-icon>
      <p class="email-summary-content singe-line">Hello World Hello World Hello World Hello World Hello World</p>
      <span class="send-time">2022-12-24</span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  info: {
    type: Object,
    required: true
  },
  currentId: {
    type: String,
    default: ''
  }
})
</script>

<style lang="less" scoped>
.email-summary-content-component{
  padding: 7px 14px;
  border-bottom: 1px solid #eeeeee;
  &:hover{
    background: #E5F3F3;
    cursor: pointer;
  }
  &.current{
    color: #fff;
    background: @primary-color;
    .email-status{
      .anticon{
        color: #ffffff;
      }
    }
    .email-address{
      font-weight: bold;
    }
    &.non-read{
      color: #ffffff;
      .read-status{
        color: #ffffff;
      }
    }
  }
  &.non-read{
    font-weight: bold;
    color: #000;
    .email-summary-content-wrapper{
      font-weight: inherit;
    }
    .send-time{
      font-weight: normal;
    }
    .read-status{
      color: @primary-color;
    }
    .email-address{
      font-weight: bold;
    }
  }
  .item-top, .item-bottom{
    display: flex;
    align-items: center;
  }
  .item-top{
    //margin-bottom: 5px;
  }
  .email-status{
    .anticon{
      color: @primary-color;
    }
  }
  .email-status{
    margin-left: auto;
  }
  .read-status, .collect-status{
    margin-right: 3px;
    color: #cccccc;
  }
  .email-address{
    font-size: 16px;
  }
  .collect-status.active{
    color: #ffba00;
  }
  .send-time{
    flex-shrink: 0;
  }
  .email-summary-content{
    padding-right: 25px;
    font-size: 12px;
  }
}
</style>
